<template>
  <div class="system">
    <el-row>
      <el-col :span="7">
        <div class="system-top-title">{{ pathItem.name }}</div>
        <div style="position: relative;">
          <div ref="systemPieChart" style="width: 500px; height: 180px;margin:0 auto;"></div>
          <div class="systemPieTotal">
            <p>{{ totalScore }} 分</p>
            <span>健康度</span>
          </div>
        </div>
      </el-col>
      <el-col :span="7" class="system-top-right">
        <div class="system-top-title">远程控制</div>
        <el-table :data="tableData" border height="195">
          <el-table-column prop="name" label="名称">
          </el-table-column>
          <el-table-column prop="runningState" label="状态">
          </el-table-column>
          <el-table-column label="操作" align="center" width="120">
            <template slot-scope="scope">
              <el-button type="text" size="mini" :disabled="scope.row.isRunningState"
                @click="changeSwitch(scope.row)">启动</el-button>
              <el-button type="text" size="mini" :disabled="!scope.row.isRunningState"
                @click="changeSwitch(scope.row)">关闭</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 中间 -->
    <div style="margin-top: 20px;">
      <el-tabs v-model="activetabsIndex" @tab-click="handleClick">
        <el-tab-pane v-for="item in tabsList" :key="item.itemIndex" :label="item.itemName"
          :name="item.itemIndex"></el-tab-pane>
      </el-tabs>
    </div>
    <div v-if="!activetabsItem.iframe">
      <!-- <div v-if="activetabsItem.itemIndex == '4'" style="margin-bottom: 10px;">
        <div class="statistics-cont" v-for="item in statistics" :key="item.name">
          <img src="@/assets/images/system-tabs1.png" alt="" style="float: left;">
          <p>{{ item.name }}</p>
          <span>{{ item.value }} 个</span>
        </div>
      </div> -->
      <!-- 条件 -->
      <!-- <div>
        <el-form ref="searchForm" :model="searchForm" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="用户昵称" prop="nickname">
                <el-input v-model="searchForm.nickname" placeholder="请输入用户昵称" maxlength="30" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="归属部门" prop="roleIds">
                <el-select v-model="searchForm.roleIds" multiple placeholder="请选择角色">
                  <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName"
                    :value="item.roleId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="submitForm">查 询</el-button>
              <el-button @click="reset">重 置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div> -->
      <!-- 列表 -->
      <div class="tableBox">
        <el-table :data="tableList" row-key="id" :default-expand-all="false"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border style="width: 100%;" height="475px">
          <el-table-column v-for="(item, index) in columns" :key="index" align="center" show-overflow-tooltip
            :prop="item.prop" :label="item.label">
          </el-table-column>
        </el-table>
        <el-pagination style="float: right" background @current-change="pageNumChange" @size-change="pageSizeChange"
          :current-page="pageNum" :page-size="pageSize" :page-sizes="[10, 20, 30, 40]" :total="total"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </div>
    <div v-else>
      <iframe style="width:100%;height: 515px" :src="this.iframesrc" />
    </div>
    <el-dialog :visible.sync="dialogVisible" width="15%" :close-on-click-modal="false" style="top: 30%;"
      custom-class="password1-dialog">
      <div class="password1-box">
        <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
      </div>
      <div style="text-align: right;margin-top: 20px;">
        <el-button @click="closeDialogVisible">取 消</el-button>
        <el-button type="primary" @click="handle">处理</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { healthLevel, remoteControl, startYwmkapp, stopYwmkapp, tabItems, tabItemsData } from "@/api/oneself/systemInfo";
import { mapState, mapActions, mapMutations } from "vuex";

export default {
  name: "Index",
  data() {
    return {
      pieData: [{
        name: '软件可用度',
        value: 0
      }, {
        name: '可靠性',
        value: 0
      }, {
        name: '业务支持率',
        value: 0
      }, {
        name: '设备在线率',
        value: 0
      }],
      totalScore: 0,
      myChart: null,
      tableData: [],
      // 中间
      tabsList: [],
      activetabsIndex: '0',
      activetabsItem: {},
      statistics: [{
        name: '测点数',
        value: 1000
      }, {
        name: '分站',
        value: 100
      }, {
        name: '告警数',
        value: 0
      }],
      // 下面
      searchForm: {
        nickname: '',
        roleIds: ''
      },
      rules: {},
      roleList: [],
      // 列表
      columns: [],
      tableList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      iframesrc: '',
      // 初始换获取菜单路由数据
      pathItem: {},
      params: {},
      // 启动停止
      oneTouchitem: {},
      dialogVisible: false,
      password: ''
    };
  },
  computed: {
    ...mapState({
      visitedViews: state => state.tagsView.visitedViews,
    }),
  },
  created() { },
  mounted() {
    let path = this.$route.path;
    this.visitedViews.map((item, key) => {
      if (item.path == path) {
        this.pathItem = item;
        this.params = {
          id: item.meta.systemId,
          name: item.title,
        }
      }
    });
    console.log(this.pathItem);
    console.log(this.visitedViews);
    this.$nextTick(() => {
      this.init();
    })
  },
  beforeDestroy() {
    if (!this.myChart) {
      return
    }
    this.myChart.dispose()
    this.myChart = null
  },
  methods: {
    // 健康度
    initChart() {
      this.myChart = echarts.init(this.$refs.systemPieChart);

      var img = require('@/assets/images/pie_img2.png')
      var color1 = ["#5F8CFC", "#52C0F7", "#73E192", "#FBC157"]
      //配置信息

      var option = {
        color: color1,
        graphic: {
          elements: [{
            type: "image",
            z: 3,
            style: {
              image: img,
              width: 160,
              height: 160
            },
            left: 'center',
            top: 'center',
          }]
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 'center',
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            z: 5,
            radius: ['53%', '68%'],
            center: ['50%', '50%'],
            data: this.pieData,
            label: {
              formatter: '{b}\n{c} 分',
            },
          }
        ]
      };
      this.myChart.setOption(option);
    },
    async queryhealthLevel() {
      const data = await healthLevel(this.params);
      if (data && data.code === 200) {
        this.pieData = [
          {
            name: '软件可用度',
            value: data.body.softwareAvailability
          }, {
            name: '可靠性',
            value: data.body.reliabilityProportion
          }, {
            name: '业务支持率',
            value: data.body.businessSupportRate
          }, {
            name: '设备在线率',
            value: data.body.deviceOnlineProportion
          },
        ];
        console.log(this.pieData);
        this.totalScore = data.body.totalScore || 0;
        this.$nextTick(() => {
          this.initChart();
        })
      } else {
        this.$message.error(data.message);
      }
    },
    // 远程控制
    // 关闭弹框
    changeSwitch(row) {
      console.log(row)
      this.oneTouchitem = row;
      this.dialogVisible = true;
    },
    closeDialogVisible() {
      this.dialogVisible = false;
      this.password = '';
      this.oneTouchitem = {};
    },
    handle() {
      if (this.password == undefined || this.password === "") {
        this.$message.error("请输入密码");
        return;
      } else {
        if (this.oneTouchitem.isRunningState) {
          this.querystopYwmkapp(this.oneTouchitem);
        } else {
          this.querystartYwmkapp(this.oneTouchitem);
        }
      }
    },
    async querystartYwmkapp(row) {
      const data = await startYwmkapp({ id: row.id });
      if (data && data.code === 200) {
        this.queryremoteControl();
      } else {
        this.$message.error(data.message);
      }
    },
    async querystopYwmkapp(row) {
      const data = await stopYwmkapp({ id: row.id });
      if (data && data.code === 200) {
        this.queryremoteControl();
      } else {
        this.$message.error(data.message);
      }
    },
    async queryremoteControl() {
      const data = await remoteControl(this.params);
      if (data && data.code === 200) {
        this.tableData = data.body;
      } else {
        this.$message.error(data.message);
      }
    },
    // table标签页-显示与否
    async querytabItems() {
      const data = await tabItems(this.params);
      if (data && data.code === 200) {
        this.tabsList = data.body;
        this.activetabsIndex = data.body[0].itemIndex || 0;
        this.activetabsItem = data.body[0];
        this.getData();
      } else {
        this.$message.error(data.message);
      }
    },
    handleClick(tab) {
      this.tabsList.map((item) => {
        if (item.itemName == tab.label) {
          this.activetabsItem = item;
          this.getData();
        }
      });
    },
    // table标签-列表数据
    submitForm() {
      this.$refs["searchForm"].validate(valid => {
        if (valid) {
          this.getData(1);
        }
      });
    },
    reset() {
      this.$set(this.$data, 'searchForm', {});
      this.pageNum = 1;
      this.pageSize = 10;
      this.getData();
    },
    pageNumChange(num) {
      this.pageNum = num;
      this.getData();
    },
    pageSizeChange(size) {
      this.pageSize = size;
      this.getData();
    },
    async getData() {
      let pam = {
        ...this.params,
        ...this.activetabsItem
      }
      let pam2 = {
        current: this.pageNum,
        size: this.pageSize,
      }
      const data = await tabItemsData(pam, pam2);
      if (data && data.code === 200) {
        if (this.activetabsItem.iframe) {
          this.iframesrc = data.body;
        } else {
          this.columns = data.body.columns;
          this.tableList = data.body.records;
          this.total = data.body.total;
        }
      } else {
        this.$message.error(data.message);
      }
    },
    // 初始化请求所有接口
    init() {
      this.queryhealthLevel();
      this.queryremoteControl();
      this.querytabItems();
    }
  }
};
</script>

<style scoped lang="scss">
.system {
  width: 100%;
  height: 100%;
  padding: 20px;

  .system-top-title {
    border-left: 4px solid #0C2D53;
    font-weight: 600;
    font-size: 18px;
    color: #333333;
    text-indent: 1rem;
    margin-bottom: 10px;
  }

  .systemPieTotal {
    text-align: center;
    color: #333333;
    position: absolute;
    left: 42%;
    top: 36%;

    p {
      font-weight: 500;
      font-size: 24px;
      margin: 0;
    }

    span {
      font-size: 16px;
      color: #333333;
    }
  }

  .statistics-cont {
    display: inline-block;
    width: 200px;
    height: 80px;
    border-radius: 4px;
    border: 1px solid #E6EAEE;
    padding: 15px 20px;
    margin-right: 20px;
    font-weight: 500;
    font-size: 16px;
    color: #333333;

    img {
      margin-right: 10px;
    }

    p {
      margin: 0;
    }
  }
}
</style>
